var imgs = 5, idx = 0, timeId = null;
var content = document.querySelector('.content');
var uls = document.querySelector('.content-inner ul');
var indicator = document.querySelector('.box .indicator');
var btnLeft = document.querySelector('.btn-left');
var btnRight = document.querySelector('.btn-right');
var btnBox = document.querySelector('.btn-box');
var dotBox = document.querySelector('.dot-box');





// 动态生成图片
for(var i = 0;i<imgs-1;i++){
    var li = document.createElement("li")
    var img = document.createElement("img")
    img.src = `./image/${i+1}.jpg`
    li.appendChild(img)
    uls.appendChild(li)
}

// 克隆多最一张图片防止回滚
var firstNode = uls.children[0].cloneNode(true)

uls.appendChild(firstNode)





// 1.图片自动轮播
// 上一张
function tigglePre (){
    
    if(idx == 0){
        idx = uls.children.length - 1
        uls.style.left = `-${uls.children.length }` 
        uls.style.transition = 'none'
    }
    idx -= 1
    uls.style.left = `-${idx * uls.children[0].clientWidth}px`
    uls.style.transition = 'left 0.3s'
}

// 下一张
function tiggleNext (){
    
    if(idx === uls.children.length-1){
        idx = 0
        uls.style.left = 0
        uls.style.transition = 'none'
    }
    idx+=1
    uls.style.left = `-${idx * uls.children[0].clientWidth}px`
    uls.style.transition = 'left 0.3s'
}



function autoPlay() {
    timeId = setInterval(function () {
        tiggleNext()
    }, 2000);
}
autoPlay();


content.onmouseover = function () { clearInterval(timeId); };
content.onmouseout = autoPlay;





// 3.左右切换
btnRight.onclick = tiggleNext;
btnLeft.onclick = tigglePre;




